<template>
  <div class="activity-wrapper">
    <div class="content">
      <div class="operation">
        <el-tabs v-model="activeName" @tab-click="handleTabClick">
          <el-tab-pane label="已发布" name="first" />
          <el-tab-pane label="未发布" name="second" />
        </el-tabs>
      </div>
      <div class="top">
        <div class="title-wrapper">
          <Input placeholder="请输入名称" @search="hanldeSearch" />
        </div>
        <el-button @click="$router.push({path: '/activity/edit'})">添加</el-button>
      </div>
      <div class="table">
        <el-table :data="activityList" style="width: 100%" :height="height">
          <el-table-column prop="date" label="名称" width="300">
            <template slot-scope="scope">
              <div class="d-flex">
                <el-avatar shape="square" :size="70" :src="scope.row.cover" />
                <p class="ml" style="width: 180px">{{ scope.row.name }}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="活动地址" width="180" />
          <el-table-column prop="activity_num" label="报名人数" >
               <template slot-scope="scope">
              <div>
                <span class="col-blue" @click="lookActivity(scope.row,0)">{{scope.row.activity_num}}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="attend_num" label="到场人数" >
               <template slot-scope="scope">
              <div>
                <span class="col-blue" @click="lookActivity(scope.row,1)">{{scope.row.attend_num}}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="date" label="签到二维码" width="200">
            <template slot-scope="scope">
              <div>
                <span class="col-blue" @click="downloadCode(scope.row)">下载二维码</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="date" label="活动时间">
            <template slot-scope="scope">
              <div style="white-space: nowrap">{{ scope.row.start_at }}~{{ scope.row.end_at }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="date" label="是否发布">
            <template slot-scope="scope">
              <div>
                <el-switch
                  v-model="scope.row.isActive"
                  @change="(val) => {handleChange(val, scope)}"
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column label="排序">
            <template slot-scope="scope">
              <div>
                <el-input
                  v-model="scope.row.sort"
                  size="medium"
                  style="width: 50px"
                  @blur="handleBlur(scope)"
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200" fixed="right">
            <template slot-scope="scope">
              <div>
                <span class="col-blue" @click="edit(scope)">编辑</span>
                <span class="col-red" @click="delActivity(scope.row)">删除</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <Pagination
      class="pagination"
      :total="total"
      :cur-page="currentPage"
      @nextPage="handleNextPage"
    />
  </div>
</template>
<script>
import Input from "@/common/input";
import Pagination from "@/common/pagination";
import Resize from "@/common/mixins/resize";
import {
  getActivityList,
  setStatus,
  activitySort,
  delActivity
} from "@/api/http/activity";
const ERR_OK = 200;
export default {
  components: {
    Input,
    Pagination
  },
  mixins: [Resize],
  data() {
    return {
      defaultHeight: 290,
      value: true,
      activeName: "first",
      status: 1,
      activityList: null,
      total: 0,
      currentPage: 1,
      query: ""
    };
  },
  created() {
    this._getActivityList(this.status, this.currentPage);
  },
  methods: {
    // 查看报名详情
    lookActivity(row,i){
      this.$router.push({
        path:"/activity/sign-up",
        query:{id:row.id,status:i}
      });
    },
    // 删除活动
    delActivity(row) {
      console.log(row.id,'----row.id');
      delActivity({ id: row.id }).then(res => {
        if (res.code == 200) {
          this.$message.success("删除成功");
          this._getActivityList(this.status, this.page, this.query);
        }
      });
    },
    // 下载二维码
    downloadCode(row) {
      window.location.href = `https://ddsc.izhixiu.cn/api/back/get/qrcode?activity_id=${row.id}`;
    },
    edit(scope) {
      this.$router.push({
        path: "/activity/edit",
        query: { id: scope.row.id }
      });
    },
    handleBlur(scope) {
      this._activitySort({ id: scope.row.id, sort: scope.row.sort }).then(
        res => {
          this._getActivityList(this.status, this.currentPage, this.keywords);
        }
      );
    },
    handleChange(val, scope) {
      this._setStatus(scope.row.id);
    },
    handleNextPage(page) {
      this.currentPage = page;
      this._getActivityList(this.status, this.currentPage);
    },
    handleTabClick() {
      this.currentPage = 1;
      switch (this.activeName) {
        case "first":
          this.status = 1;
          this._getActivityList(this.status, this.currentPage);
          break;
        case "second":
          this.status = 0;
          this._getActivityList(this.status, this.currentPage);
          break;
      }
    },
    add() {},
    hanldeSearch(query) {
      this.currentPage = 1;
      this.query = query;
      this._getActivityList(this.status, this.page, this.query);
    },
    _getActivityList(status, page, keywords) {
      getActivityList(status, page, keywords)
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res);
            res.data.data.forEach(item => {
              if (item.is_open) {
                item.isActive = true;
              } else {
                item.isActive = false;
              }
            });
            this.activityList = res.data.data;

            this.total = res.data.total;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    _setStatus(id) {
      setStatus(id).then(res => {
        if (res.code === ERR_OK) {
          this.$message({
            message: "操作成功",
            showClose: true,
            type: "success"
          });
        }
      });
    },
    _activitySort({ id, sort }) {
      return activitySort({ id, sort })
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res);
            this.$message({
              message: "操作成功",
              showClose: true,
              type: "success"
            });
            return Promise.resolve(res);
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/styles/el-tab.scss";
@import "@/styles/el-button.scss";
@import "@/styles/el-table.scss";
@import "@/styles/color.scss";
@import "@/styles/el-pagination.scss";
.content {
  .top {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    .title-wrapper {
      display: flex;
      align-content: center;
      .title {
        height: 44px;
        line-height: 44px;
        color: rgba(68, 68, 68, 1);
        font-size: 18px;
        font-family: Roboto;
        font-weight: bold;
        cursor: pointer;
      }
    }
  }
}
.d-flex {
  display: flex;
  align-items: center;
  justify-content: center;
}
.ml {
  margin-left: 10px;
}
</style>
